<template>
  <div class="tableBox">
    <!--列表-->
    <el-table size="small" :data="listData" style="width: 100%" v-loading="loading"  element-loading-text="拼命加载中">
      <el-table-column align="center" prop="id" label="序号">
      </el-table-column>
      <el-table-column align="center" prop="zId" label="资产编号">
        <template slot-scope="scope">
          <!-- <div style="cursor: pointer;" @click="()=>{$emit('onGetId',scope.row.zId)}">
            {{ scope.row.zId }}
          </div> -->
          <div>
            <el-link type="primary" @click="()=>{$emit('onGetId',scope.row.zId,scope.row)}">{{ scope.row.zId }}</el-link>
          </div>
          
        </template>
      </el-table-column>
      <el-table-column align="center" prop="nftAddress" label="NFT合约地址">
      </el-table-column>
      <el-table-column align="center" label="是否已铸币AUSD">
        <template slot-scope="scope">
          <div class="flex_div">
            <p><i :class="scope.row.minted?'ups':''"></i> 是</p>
            <p><i :class="scope.row.minted?'':'ups'"></i> 否</p>
            <!-- {{scope.row.minted?'是':'否'}} -->
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="amount" label="铸币数量">
      </el-table-column>
      </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>

<script>
import { AUsdList } from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  props: ['activeName'],
  data() {
    return {
      loading: false, //是显示加载
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      formInline: {
        from: 1,
        limit: 10,
      },
      listData: []
    }
  },
  

  mounted() {
    if(this.activeName){
      // console.log(this.activeName)
      this.getdata(this.formInline)
    }
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  //  staging: 暂存
  //   estimating: 预估中
  //   auditing: 审计中
  //   nftConfirm: nft 待铸造
  //   ausdWaiting: ausd 待铸造
  //   minted: 已铸造
  methods: {
    // 获取转入列表
    getdata(parameter) {
      this.loading = true
      AUsdList(parameter)
        .then(res => {
          this.loading = false
          if (res.code != 0) {
            this.$message({
              type: 'info',
              message: res.message
            })
          } else {
            this.listData = res.data.list
            // 分页赋值
            this.pageparm.total = res.data.total
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('列表加载失败，请稍后再试！')
        })
    },

    // 分页插件事件
    callFather(parm) {
      this.pageparm.pageSize = parm.pageSize
      this.formInline.from = (parm.currentPage-1)*(this.pageparm.pageSize) + 1
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },

  },

  // 注册组件
  components: {
    Pagination
  },
}
</script>

<style scoped>
  .flex_div{
    display: flex;
    justify-content: center;
  }
  .flex_div p{
    display:flex;
    align-items: center;
    margin: 0 10px;
  }
  .flex_div p i{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin-right: 5px;
  }
  .flex_div p i.ups{
    border: 3px solid rgb(10, 190, 52);
  }
  .tableBox /deep/ .el-table thead th{
    background-color: #EFF4F9;
    color: #919191;
    border: 0;
    padding: 15px 0;
    font-weight: normal;
    font-size: 14px;
  }
  .tableBox /deep/ .el-table tbody td{
    padding: 15px 0 !important;
  }
  .tableBox /deep/ .el-table thead th:nth-child(1){
    border-radius: 10px 0 0 10px;
  }
  .tableBox /deep/ .el-table thead th:nth-last-child(2){
    border-radius:0 10px 10px 0;
  }

  .selectIpt{
    width: 20px;
    height: 20px;
    border-radius: 2px;
    border: 1px solid #999;
    margin: 0 auto;
  }
</style>

 
 